<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="ljc">
    <title></title>
    <script src="js/jquery-3.1.1.js">
        
    </script>
    <style>
        #chooseImg img{
            height: 100px;
            width: 100px;
        }
        #chooseImg input{
            display: none;
        }
    </style>
</head>
<body>
    <form>
        <div id="chooseImg">
            <img src="img/1.png" alt="">
            <input type="file">
            <img src="img/1.png" alt="">
            <input type="file">
            <img src="img/1.png" alt="">
            <input type="file">
        </div>
        <div id="upload">
            <button type="button">添加</button>
            <button type="submit">上传</button>
        </div>
    </form>
</body>
</html>
<script>
    var btn = $($('button')[0]);
    btn.click(function(){
        var img = document.createElement('img');
        img.src = 'img/1.png';
        $('#chooseImg').append(img);
        var input = document.createElement('input');
        $('input').attr('type','file')
        input.type='file';
        $('#chooseImg').append(input);
        clickFile();
    })
    clickFile();
    function clickFile(){
        $('img').each(function(){
            $(this).click(function(){
                $(this).next().click();
            })
        })

        $('input').each(function(){
            $(this).on('change',function(){
                // console.dir($(this)[0].files)
                var file = $(this)[0].files[0];
                console.dir(file);
        
                if(file.type=='image/jpeg' || file.type=='image/png'){
                    $(this).prev()[0].src=URL.createObjectURL(file);
               }else{
                   alert('只能传图片')
               }
            })
            
        })
    }
</script>